// pinia 插件是一个函数,可以选择返回要添加到store的属性,
// 可以接收一个可选参数: context
/**
 * context.pinia // 使用 `createPinia()` 创建的 pinia
  context.app // 使用 `createApp()` 创建的当前应用程序（仅限 Vue 3）
  context.store // 插件正在扩充的 store
  context.options // 定义存储的选项对象传递给`defineStore()`
 */
import type { PiniaPluginContext } from 'pinia'

interface PersistenceItem {
  // store 名
  name: string,
  // 该store下要持久化的属性名
  stateList: string[]
}

const persistenceSet = (key: string, value: string) => {
  localStorage.setItem(key, value)
}

const persistenceGet = (key: string) => {
  return localStorage.getItem(key) ? localStorage.getItem(key) : ''
}

// 内层函数才是真正的插件,外层函数用于接收插件参数
// 插件的运行时机, 是当store被use(也就是执行时)
export function persistencePlugin(persistenceList: PersistenceItem[]) {
  // 持久化插件
  return (context: PiniaPluginContext) => {
    console.log('context', context);

    persistenceList.forEach(item => {
      if (context.store.$id === item.name && item.stateList.length > 0) {
        // 从本地存储中恢复数据
        item.stateList.forEach(key => {
          // 本地存储中没有该值初始化为''
          context.store.$state[key] = persistenceGet(key)
        })
        // 符合条件开启存储, 优点是值不发生变化的时候不会重复执行
        context.store.$subscribe((mutation) => {
          // 只有userid 发生变化才会触发userid的本地存储变化
          if (item.stateList.includes((<any>mutation.events).key)) {
            const value = (<any>mutation.events).newValue
            const valueType = typeof value
            persistenceSet((<any>mutation.events).key, valueType === 'string' ? value : JSON.stringify(value))
          }
        })
      }
    })
  }
}